import React, { useEffect, useState, useRef } from 'react';
import { Icon, Pull, Popup, DatePicker } from 'zarm'
import BillItem from '@/components/BillItem'
import s from './style.module.less'
import dayjs from 'dayjs'
import { REFRESH_STATE, LOAD_STATE, get } from '../../utils';
import CustomIcon from '@/components/CustomIcon';
import PopupAddBill from '@/components/PopupAddBill'
import PopupType from '@/components/PopupType'
import PopupDate from '@/components/PopupDate'

console.log(BillItem);
export default function Index() {
    const [totalExpense, setTotalExpense] = useState(0)
    const [totalIncome, setTotalIncome] = useState(0)
    const [list, setList] = useState([])
    const [currentTime, setCurrentTime] = useState(dayjs().format('YYYY-MM'))
    const [page, setPage] = useState(1)
    const [totalPage, setTotalPage] = useState(0)
    const [refreshing, setRefreshing] = useState(REFRESH_STATE.normal)
    const [loading, setLoading] = useState(LOAD_STATE.normal)
    const typeRef = useRef()

    const [currentSelect, setCurrentSelect] = useState({})

    const addRef = useRef()

    const monthRef = useRef()


    useEffect(() => {
        getBillList()
    }, [page, currentSelect, currentTime])

    const getBillList = async () => {
        const { data } = await get(`http://127.0.0.1:7001/api/bill/list?page=${page}&page_size=5&date=${currentTime}`)
        if (page == 1) {
            setList(data.list)
        } else {
            setList(list.concat(data.list))
        }
        setTotalPage(data.totalPage)
        setTotalExpense(data.totalExpense.toFixed(2));
        setTotalIncome(data.totalIncome.toFixed(2));
        setLoading(LOAD_STATE.success)
        setRefreshing(LOAD_STATE.normal)

    }

    const toggle = () => {
        typeRef.current && typeRef.current.show()
    }

    const select = item => {
        console.log(item, 11111);
        setRefreshing(REFRESH_STATE.loading)

        setPage(1)
        setCurrentSelect(item)
    }

    const monthToggle = () => {
        monthRef.current && monthRef.current.show()
    }

    const selectMonth = (item) => {
        console.log(item, 111111);
        setRefreshing(REFRESH_STATE.loading);
        setPage(1);
        setCurrentTime(item)
    }

    const refreshData = () => {
        setRefreshing(REFRESH_STATE.loading)
        if (page != 1) {
            setPage(1)
        } else {
            getBillList()
        }
    }

    const loadData = () => {
        console.log();
        if (page < totalPage) {
            setLoading(LOAD_STATE.loading);
            setPage(page + 1);
        }
    }

    const addToggle = () => {
        addRef.current && addRef.current.show()
    }


    return <div className={s.home}>
        <div className={s.header}>
            <div className={s.dataWrap}>
                <span className={s.expense}>总支出：<b>¥ {totalExpense}</b></span>
                <span className={s.income}>总收入：<b>¥ {totalIncome}</b></span>
            </div>
            <div className={s.typeWrap}>
                <div className={s.left}>
                    <span className={s.title} onClick={toggle}>
                        类型
                        <Icon className={s.arrow} type="arrow-bottom"></Icon>
                    </span>
                </div>
                <div className={s.right}>
                    <span className={s.time} onClick={monthToggle}>
                        {currentTime}
                        <Icon className={s.arrow} type="arrow-bottom"></Icon>
                    </span>
                </div>
            </div>
        </div>
        <div className={s.contentWrap}>
            {
                list.length ? <Pull
                    animationDuration={200}
                    stayTime={400}
                    refresh={{
                        state: refreshing,
                        handler: refreshData
                    }}
                    load={{
                        state: loading,
                        distance: 200,
                        handler: loadData
                    }}
                >
                    {
                        list.map((item, index) => <BillItem
                            bill={item}
                            key={index}
                        />)
                    }
                </Pull> : null
            }
        </div>
        <div className={s.add} onClick={addToggle}><CustomIcon type='tianjia' /></div>
        <PopupAddBill ref={addRef} onReload={refreshData}></PopupAddBill>
        <PopupType ref={typeRef} onSelect={select} />
        <PopupDate ref={monthRef} mode="month" onSelect={selectMonth} />
    </div >
}